<template>
    <div class="message">
        <div class="tool">
            <!-- 搜索列表 -->
            <div class="search">
            <el-button type="success" @click="searchAll" style="margin-right: 10px;">{{ $t("message.queryAll") }}</el-button>
            <el-date-picker
                v-model="queryParmas.queryDate"
                type="date"
                :placeholder="$t('message.selectDate')"
                :disabled-date="disabledDate"
            />
            <el-button type="primary" @click="toSearch" class="query">{{ $t("message.DateQuery") }}</el-button>
            <el-input
                v-model="queryParmas.keywords"
                style="width: 240px;margin-left: 10px;"
                :placeholder="$t('message.key_query')"
                clearable
            />
            <el-button type="primary" style="margin-left: 10px;" @click="queryKeyword">{{ $t("message.key_query") }}</el-button>
            
          </div>
          <div class="selectType">
              <el-select v-model="queryParmas.queryType" class="m-2" :placeholder="$t('message.stateChoose')">
                 <el-option v-for="(item,index) in labelList" :value="item.value" :label="item.label" :key="index">
                </el-option>
              </el-select>
              <el-button type="primary" style="margin-left: 10px;" @click="query_by_state">{{ $t("message.query") }}</el-button>
          </div>
      </div>
        <div class="table">
            <el-table 
                :data="stateList"
                border 
                stripe
                :default-sort="{prop: 'createdAt', order: 'descending'}"
            >
         <el-table-column type="index" label="#"></el-table-column>
                <el-table-column width="250px" sortable prop="createdAt">
                    <template #header>
                        {{ $t("alarmRecord.time") }}
                    </template>
                    <template #default="{row}">
                        <i class="iconfont icon-shizhongclock74" style="font-size: 16px;margin-right: 5px;"></i> {{ filterDate(row.createdAt)  }}
                    </template>
        </el-table-column>  
        <!-- <el-table-column width="120px">
            <template #header>报警等级</template>
            <template #default="{row}">
                <el-tag v-if="row.level == 2" type="info">轻度报警</el-tag>
                <el-tag v-else-if="row.level == 3" type="warning">中度报警</el-tag>
                <el-tag v-else-if="row.level== 4" type="danger">重度报警</el-tag>
            </template>
        </el-table-column> -->
        <el-table-column prop="info" :label="$t('alarmRecord.content')">
        </el-table-column>
        <el-table-column :label="$t('alarmRecord.state')" prop="state" width="120px">
            <template #default="{row}">
                <div v-if="row.state === 0">
                    <span class="circle-danger"></span>
                    <el-link type="danger">{{ $t("alarmRecord.solved") }}</el-link>
                </div>
                <div v-if="row.state === 1">
                    <span class="circle-primary"></span>
                    <el-link type="primary">{{ $t("alarmRecord.Under_way") }}</el-link>
                </div>
                <div v-if="row.state === 2">
                    <span class="circle-success"></span>
                    <el-link type="success">{{ $t("alarmRecord.resolved") }}</el-link>
                </div>
            </template>
        </el-table-column>
        <el-table-column width="160px">
            <template #header>{{ $t("setting.operate") }}</template>
            <template #default="{row}">
                <el-link type="primary" style="margin-right: 15px;" @click="openConfig(row.state,row.rid)">{{ $t("alarmRecord.set") }}</el-link>
                <el-popconfirm 
                    :title="$t('alarmRecord.delete_tip')"
                    :confirm-button-text="$t('message.confirm')"
                    :cancel-button-text="$t('message.cancel')"
                    @confirm="deleteState(row.rid)"
                >
                    <template #reference>
                        <el-link type="danger">{{ $t('alarmRecord.delete') }}</el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="queryParmas.pageSize"
                :page-sizes="[10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>

    <!-- 配置应用程序 -->
    <el-dialog
    v-model="configExe"
    :title="$t('alarmRecord.set')"
    width="500"
  >
  <header id="state_update" style="padding: 10px;">{{ $t('alarmRecord.state_change') }}</header>
  <el-radio-group v-model="config_radio">
    <el-radio :value="0">{{ $t("alarmRecord.solved") }}</el-radio>
    <el-radio :value="1">{{ $t("alarmRecord.Under_way") }}</el-radio>
    <el-radio :value="2">{{ $t("alarmRecord.resolved") }}</el-radio>
  </el-radio-group>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="configExe = false">{{ $t("message.cancel") }}</el-button>
        <el-button type="primary" @click="confirm_update_state(row)">
          {{ $t("message.confirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {Delete,Search} from '@element-plus/icons-vue'
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import { IhttpReturn } from '../../until/interface';
    let {proxy} = getCurrentInstance()
    /** 关于数据查询的方面的 */
    let currentPage = ref(1)
    let queryParmas = reactive({
        pageSize: 10,
        page: 1,
        queryDate: "",
        queryType: "",
        keywords: ""
    })
    let stateList = ref([]) // 报警信息列表
    let total = ref(0) // 总数
      // 对时间函数的过滤
    let filterDate = (date:Date) => {
        return new Date(date).toLocaleDateString().replace(/\//g,"-")+' ' + new Date(date).toLocaleTimeString()
     }  
    onMounted(() => {
        getStateList()
    })
    // 删除报警信息
    const deleteState = async (rid:number) => {
       let {data: res}:{data:IhttpReturn} = await proxy.$adminHttp.delete("/admin/removeErrorRecord",{
        params: {
            rid
        }
    })
    if (res.code !== 200) return proxy.notifyWarning(res.msg)
    getStateList()
    proxy.notifySuccess(res.msg)
    }

    // 获取报警信息列表
    const getStateList = async () => {
        let {data: res} = await proxy.$adminHttp.get("/admin/getErrorList",{
        params: queryParmas
    })
        total.value = res.data.total  //获取查询的总数
        stateList.value = res.data.data    // 数据列表
    }
   // 禁用日期
     const disabledDate = (time: Date) => {
        return time.getTime() > Date.now()
     }
  // 按照日期进行查询
   const toSearch = () => {
        if (queryParmas.queryDate === '') return proxy.notifyWarning("请选择查询的日期")
        queryParmas.queryDate = new Date(queryParmas.queryDate).toLocaleDateString().replace(/\//g,'-')
        getStateList()
    }
      // 查询所有数据
      const searchAll = () => {
        queryParmas.page = 1
        queryParmas.pageSize = 10
        queryParmas.queryDate = ''
        queryParmas.queryType = ""
        queryParmas.keywords = ""
        getStateList()
    }
    const labelList = ref([
        {
            label: "待解决",
            value: 0
        },
        {
            label: "进行中",
            value: 1
        },
        {
            label: "已解决",
            value: 2
        }
    ])

    // 配置程序
    const configExe = ref(false)

    const config_radio = ref(0) // 选中那个状态

    const current_rid = ref(0) // 选中的rid

    // 打开配置对话框
    const openConfig = function(state: number,rid: number) {
        config_radio.value = state
        current_rid.value = rid
        configExe.value = true

    }

    // 确认修改状态
    const confirm_update_state = async function() {
        let {data:res}: {data: IhttpReturn} = await proxy.$adminHttp.put("/admin/updateErrorState",{
            rid: current_rid.value,
            state: config_radio.value
        })
        if (res.code !== 200) return proxy.notifyWarning("修改状态失败")
        proxy.notifySuccess(res.msg)
        configExe.value = false
        getStateList()
    }

    // 通过状态进行查询
    const query_by_state = () => {
        if (queryParmas.queryType === '') return proxy.notifyWarning("请选择一种状态")
        if (queryParmas.queryDate) queryParmas.queryDate = new Date(queryParmas.queryDate).toLocaleDateString().replace(/\//g,'-')
        getStateList()
    }
    // 通过关键字查询
    const queryKeyword = () => {
        if (queryParmas.queryDate) queryParmas.queryDate = new Date(queryParmas.queryDate).toLocaleDateString().replace(/\//g,'-')
        getStateList()
    }

    /*分页操作*/ 
    const handleSizeChange = (val:number) => {
        queryParmas.pageSize = val
        getStateList()
    }

    const handleCurrentChange = (val:number) => {
        queryParmas.page = val
        getStateList()
    }

    /*查询*/

</script>


<style lang="less" scoped>
.el-pagination {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
#state_update {
    font-size: 16px;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 3px;
        height: 20px;
        background-color: #88cf64;
    }
}
    .message {
        padding:20px 20px 0;
    .tool {
        display: flex;
        justify-content: space-between;
        align-items: center;
      .query {
        margin-left: 10px;
      }
    }
}
.table {
    margin-top: 20px;
}
.circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
}
.circle-danger {
    .circle;
    background-color: #f56c6c;
}
.circle-primary {
    .circle;
    background-color: #79bbff;
}
.circle-success {
    .circle;
    background-color: #88cf64;
}
.selectType {
    width: 15%;
    display: flex;
}
</style>